<template>
  <view class="main"
        :style="(['2','3','4'].includes(data.orderInfo?.orderStatus))
        ?'padding-bottom:env(safe-area-inset-bottom);':''">
    <view class="main_top">
      <view class="main_top_title">{{ data.orderInfo?.consignOrderNo }}</view>
      <view class="main_top_btn">{{ !data.isRefundOrder?data.getOrderStatus():data.getRefundStatus() }}</view>
    </view>

    <view class="item_div">
      <view class="item_div_title">托运宠物信息</view>
      <view>
        <view class="pet" v-for="(item,idx) in data.data.petInfo" :key="idx">{{ item.petName }}</view>
      </view>
    </view>

    <view class="item_div">
      <view class="item_div_title">出发地</view>
      <view>
      <view>
        <view class="item_div_main" style="position:relative;">
          <view class="contact"> {{ data.orderInfo?.toName }}
            <span class="tel_span">
               {{ data.orderInfo?.toPhone }}
              <image style="width:34.72rpx;height:34.72rpx;position:relative;top: 4rpx" src="https://img.qumoyugo.com/img/nurse_order_details_tel_icon.png" mode="aspectFill"/>
            </span>
          </view>
          <view class="address"> {{ data.orderInfo?.toAddress }}  </view>
        </view>
      </view>
      </view>
    </view>

    <view class="item_div">
      <view class="item_div_title">目的地</view>
      <view>
      <view>
        <view class="item_div_main" style="position:relative;">
          <view class="contact"> {{ data.orderInfo?.fromName }}
            <span class="tel_span">
               {{ data.orderInfo?.fromPhone }}
              <image style="width:34.72rpx;height:34.72rpx;position:relative;top: 4rpx" src="https://img.qumoyugo.com/img/nurse_order_details_tel_icon.png" mode="aspectFill"/>
            </span>
          </view>
          <view class="address"> {{ data.orderInfo?.fromAddress }}  </view>
        </view>
      </view>
      </view>
    </view>

    <view class="item_div">
      <view class="info_div">
        <view>托运类型：</view>
        <span>{{ data.getConsingType(data.orderInfo) }}</span>
      </view>
      <view class="info_div">
        <view>出发时间：</view>
        <span>{{ data.orderInfo?.consignTime }}</span>
      </view>
      <view class="info_div">
        <view>备 注：</view>
        <view>{{ data.orderInfo?.orderRemark}}</view>
      </view>

    </view>

    <view class="bottom_div" v-if="!['2','3','4'].includes(data.orderInfo?.orderStatus) ">
      <view v-if="!data.isRefundOrder" style="display: flex;justify-content: center">
        <button class="submitOrder" @click="data.toPay(data.orderInfo)" v-if="data.orderInfo?.orderStatus==='1'"
        :style="data.orderInfo?.orderStatus==='1'?'margin: 0 20rpx;':''">
          立即支付
        </button>
        <button @click="click('/user/order/cancelOrder?isRefund=true&isDetail=true&data=' + encodeURIComponent(JSON.stringify(data.orderInfo)))"
                class="submitOrder" v-if="['2','5'].includes(data.orderInfo?.orderStatus) && !data.data.isRefund">
          申请退款
        </button>
        <button style="background: #EE751E"
                :style="data.orderInfo?.orderStatus==='1'?'margin: 0 20rpx;':''"
                @click="click('/user/order/cancelOrder?isRefund=false&isDetail=true&data=' + encodeURIComponent(JSON.stringify(data.orderInfo)))"
                class="submitOrder" v-if="['0','1'].includes(data.orderInfo?.orderStatus)">
          取消
        </button>
      </view>
    </view>
    <view class="bottom_div" v-if="data.isRefundOrder">
      <button @click="click('/pages/refundProgress?id='+data.refundOrderId)" class="submitOrder">
        查看退款进度
      </button>
    </view>

  </view>
</template>
<script setup>
import { getCurrentInstance, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
const { $https } = getCurrentInstance().appContext.config.globalProperties

onLoad((options) => {
  if (options.orderId) {
    data.value.orderId = options.orderId
  }
  data.value.isRefundOrder = options.isRefundOrder === 'true'
  if (data.value.isRefundOrder) {
    data.value.refundStatus = options.refundStatus
    data.value.refundOrderId = options.refundOrderId
  }
  data.value.getData().then(row => {
    if (data.value.isRefundOrder && data.value.data.refundInfo) {
      data.value.refundStatus = data.value.data.refundInfo[0]?.refundStatus
    }
  })
})

const data = ref({
  isRefundOrder: false,
  refundStatus: null,
  orderId: null,
  refundOrderId: null,
  data: {},
  orderInfo: {},
  getData: () => {
    return new Promise((resolve, reject) => {
      $https({
        url: '/app/order/consignDetail',
        type: '',
        method: 'get',
        data: { orderId: data.value.orderId }
      }).then(res => {
        if (res.code === 0) {
          res.data.orderType = 2
          data.value.data = res.data
          data.value.orderInfo = res.data.orderInfo
        }
        resolve()
      }).catch(e => reject(e))
    })
  },
  getOrderStatus: () => {
    const toiletryOrderList = ['待生成', '待支付', '运输中', '已退款', '已取消', '已完成']
    if (!data.value.orderInfo) {
      return ''
    }
    return toiletryOrderList[data.value.orderInfo.orderStatus]
  },
  getRefundStatus: () => {
    const refundStatusList = ['客服审核中', '客服审核中', '退款中', '已退款', '已驳回', '退款失败']
    return refundStatusList[data.value.refundStatus]
  },
  getConsingType: (item) => {
    if (!item) {
      return ''
    }
    const consingTypeList = ['空运', '陆运', '专车']
    return consingTypeList[item.consignType]
  },
  toPay: (item) => {
    const data = {
      tableId: item.id
    }
    payJump(data)
  }
})
// 调起支付
const payJump = async order => {
  $https({
    url: '/app/order/pay',
    type: '',
    method: 'POST',
    data: {
      orderId: order.tableId,
      orderType: '2'
    }
  })
    .then(res => {
      if (res.code === 0) {
        $https({
          url: '/pay/query',
          type: 'public',
          data: {
            uuid: res.data.payOrder.uuid,
            openClientType: 'MP',
            pay: true
          }
        })
          .then(res1 => {
            if (res1.code === 0) {
              if (!res1.data.payWayList[0]) {
                uni.hideLoading()
                uni.showToast({ title: '收银台返回数据不正确' })
                return false
              }
              uni.login({
                success: reslogin => {
                  $https({
                    url: '/order/pay',
                    type: 'public',
                    method: 'POST',
                    data: {
                      payWayId: res1.data.payWayList[0].id,
                      uuid: res.data.payOrder.uuid,
                      scene: 'mp4',
                      wxCode: reslogin.code,
                      pay: true
                    }
                  })
                    .then(res2 => {
                      if (res2.code === 0) {
                        uni.requestPayment({
                          ...res2.data.signParam,
                          success: res => {
                            data.value.getData()
                            uni.hideLoading()
                          },
                          fail: () => {
                            uni.showToast({ title: '支付失败', icon: 'error' })
                            data.value.getData()
                            uni.hideLoading()
                          }
                        })
                      } else {
                        uni.hideLoading()
                      }
                    })
                    .catch(e => {
                      uni.hideLoading()
                    })
                },
                fail: () => {
                  uni.hideLoading()
                }
              })
            } else {
              uni.hideLoading()
            }
          })
          .catch(e => {
            uni.hideLoading()
          })
        // location.replace(res.data.jumpUrl + '&clientType=H5&orgin=cash')
      } else {
        uni.hideLoading()
      }
    })
    .catch(e => {
      uni.hideLoading()
    })
}
const click = (url) => {
  uni.navigateTo({
    url
  })
}
</script>
<style scoped lang="scss">
.main {
  min-height: 100vh;
  background-color: #F4F4F4;
  width: 100%;
  padding: 20rpx 20rpx calc(env(safe-area-inset-bottom) + 178rpx);
}
.bottom_div{
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  box-shadow: 0rpx 0rpx 6rpx 2rpx #EAEAEA;
  background-color: #F4F4F4;
  padding: 16rpx 16rpx calc(env(safe-area-inset-bottom) + 22rpx);
}
.submitOrder{
  width: 444rpx;
  height: 90rpx;
  background: #525FA2;
  border-radius: 45rpx;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 90rpx;
  font-size: 32rpx;
  
}

.item_div{
  background-color: white;
  border-radius: 18rpx;
  padding: 35rpx 30rpx;
  margin-top: 20rpx;
}
.item_div:first-child{
  margin-top: 0;
}
.tel_span,.contact{
  font-size: 32rpx;
  
  font-weight: 500;
  color: #333333;
}
.tel_span{
  margin-left: 38rpx;
}
.address{
  margin-top: 30rpx;
  font-size: 24rpx;
  
  font-weight: 400;
  color: #333333;
}
.item_div_title{
  font-size: 32rpx;
  
  font-weight: 500;
  color: #333333;
  margin-bottom: 45rpx;
}

.item_div_main{
  font-size: 24rpx;
  
  font-weight: 400;
  color: #333333;
  margin-top:20rpx;
}
.item_div_main:first-child{
  margin-top: 0;
}
.main_top_title{
  font-size: 32rpx;
  
  font-weight: 500;
  color: #333333;
}
.main_top{
  display: flex;
  align-items: center;
}
.main_top_btn{
  margin-left: auto;
}
.pet{
  background: #F1F1F1;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  font-size: 25rpx;
  
  font-weight: 400;
  color: #333333;
  padding: 18rpx 43rpx;
  display: inline-block;
  margin: 0 35rpx 12rpx 35rpx;
}
.pet:first-child{
  margin-left: 0;
}
.tel_span,.contact{
  font-size: 32rpx;
  
  font-weight: 500;
  color: #333333;
}
.tel_span{
  margin-left: 38rpx;
}
.address{
  margin-top: 30rpx;
  font-size: 24rpx;
  
  font-weight: 400;
  color: #333333;
}
.info_div{
  margin-top: 45rpx
}
.info_div:first-child{
  margin-top: 0rpx;
}

.info_div view{
  display: inline-block;
}
.info_div>view:first-child{
  font-size: 25rpx;
  
  font-weight: 400;
  color: #999999;
  //width: 155rpx;
}
.info_div>label{
  margin-right: 4rpx;
}
.cancel_button{
  background: #EE751E;
  border-radius: 7rpx;
  font-size: 24rpx;
  
  font-weight: 400;
  color: #FFFFFF;
}
</style>
